<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        #canvas{
            width: 100vw;
            height: 100vh;
        }
    </style>
    <script src="./libs/ascainiaojs/DisplayObject.js"></script>
    <script>
        if(this.ASCaiNiao){
            ASCaiNiao.version='0.0.1'
        }else{
            ASCaiNiao={}
        }
        let canvas,ctx;
        /*const draw=()=>{
            let w=50;
            for(let i=0;i<window.innerHeight/w;i++){
                
                for(let j=0;j<window.innerWidth/w;j++){
                        if((i+j)%2==0){
                            ctx.fillRect(j*w,i*w,w,w);
                        }
                        
                    }
            }
        };*/
        let map=new Map();

        const draw=(src,x,y)=>{
            let image;
            if(map.get(src)){
                image=map.get(src);
                ctx.drawImage(image,x,y);
            }else{
                image=new Image();
                image.onload=()=>{
                    map.set(src,image);
                    ctx.drawImage(image,x,y);
                };
                image.src='./assets/map/'+src+'.jpg';
            }
            
        };

        const drawMap=(x,y,w,h)=>{
            x=x||0;
            y=y||0;
            let px=-parseInt(x/256);
            let py=-parseInt(y/256);
            for(let i=0;i<12;i++){
                if((i*256+y)>h)break;
                for(let j=0;j<18;j++){
                    if((j*256+x)>w)break;
                    let src=i+'_'+j;
                    draw(src,j*256+x,i*256+y);
                    //console.log(src);
                }
            }
            
        };

        const debounce=(fn,wait)=>{
            let time=null;
            return ()=>{
                if(!time)clearTimeout(time);
                time=setTimeout(fn,wait);
            };
        };

        let map_x=-1000,map_y=-500;
        const init=()=>{
            //console.log(ASCaiNiao);
            canvas=document.getElementById('canvas');
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;
            //console.dir(canvas);
            ctx = canvas.getContext("2d");
            //console.log(ctx);
            drawMap(map_x,map_y,canvas.width,canvas.height);

            canvas.addEventListener('mousedown',e=>{
                console.log(e.clientX,e.clientY);
            });
        };
        window.addEventListener('resize',debounce(()=>{
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;
            drawMap(map_x,map_y,canvas.width,canvas.height);
        },1000));

        document.addEventListener('keydown',e=>{
            //console.log(e);
        });

        
    </script>
</head>
<body onload="init();">
    <canvas id="canvas"></canvas>
</body>
</html>